<template>
  <div class="dialog">
    <el-dialog :title="dialogTitle" v-model="visible" :width="width" @closed="close">
      <div class="dialog-content">
        <slot name="content"></slot>
        <slot name="footer"></slot>
      </div>
    </el-dialog>
  </div>
  </template>
  <script lang='ts' setup>
  import { ref,watch,toRefs} from 'vue';
  let visible = ref(false)
  const props = defineProps<{
    dialogTitle:string,
    width:string
  }
  >()
  const {dialogTitle,width} = toRefs(props)
  // 监听输出内容变化
  // watch(() => props.dialogTitle, (newVal: any) => {
  //   dialogTitle.value = newVal;
  //   })


  // 打开
  const show = (data?: any) => {
    visible.value = true;
  }
   // 打开
   const cancel = (data?: any) => {
    visible.value = false;
  }
  // 提交
  const submit = () => {
    visible.value = false;
  }
  // 关闭
  const close = () => {
    visible.value = false;
  };
  
  defineExpose({
    show,
    cancel
  })
  
  </script>
  
  <style lang='scss' scoped>

 
// ::v-deep .el-dialog__headerbtn .el-dialog__close{
//   display: none !important;
// }
.content {
  padding: 10px 20px;
  box-sizing: border-box;
}
  </style>
  